<template>
  <CommonPanel title="设备在线趋势" :loading="loading">
    <template #opt>
      <div>
        <CustomBtn
          v-for="(i, v) in btnList"
          :key="v"
          @click="customActive(v)"
          :active="v === index ? true : false"
        >
          {{ i.name }}</CustomBtn
        >
      </div>
    </template>
    <CommonChart ref="myChart" :option="option" />
  </CommonPanel>
</template>

<script setup>
import { computed, ref } from "vue";
import * as echarts from "echarts";
const btnList = ref([
  {
    name: "近一周",
  },
  {
    name: "近一月",
  },
]);
const index = ref(0);
function customActive(v) {
  index.value = v;
}
const colorList = ["#9E87FF", "#73DDFF", "#fe9a8b", "#F56948", "#9E87FF"];
const option = computed(() => {
  return {
    title: {
      textStyle: {
        fontSize: 12,
        fontWeight: 400,
      },
      left: "center",
      top: "5%",
    },
    legend: {
      orient: "vertical",
      icon: "circle",
      // x: 'right',
      y: "center",
      right: "5%",
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: "#556677",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        label: {
          show: true,
          backgroundColor: "#fff",
          color: "#556677",
          borderColor: "rgba(0,0,0,0)",
          shadowColor: "rgba(0,0,0,0)",
          shadowOffsetY: 0,
        },
        lineStyle: {
          width: 0,
        },
      },
      backgroundColor: "#fff",
      textStyle: {
        color: "#5c6c7c",
      },
      padding: [10, 10],
      extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
    },
    grid: {
      top: "15%",
      bottom: "15%",
      left: "10%",
      right: "15%",
    },
    xAxis: [
      {
        type: "category",
        data: ["08/1", "08/2", "08/3", "08/4", "08/5", "08/6", "08/7"],
        axisLine: {
          lineStyle: {
            color: "#DCE2E8",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#556677",
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15,
        },
        axisPointer: {
          label: {
            padding: [0, 0, 10, 0],

            margin: 15,
            // 移入时的字体大小
            fontSize: 12,
            backgroundColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#fff", // 0% 处的颜色
                },
                {
                  // offset: 0.9,
                  offset: 0.86,
                  /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
              
              */
                  color: "#fff", // 0% 处的颜色
                },
                {
                  offset: 0.86,
                  color: "#33c0cd", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#33c0cd", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DCE2E8",
          },
        },
        axisLabel: {
          textStyle: {
            color: "#556677",
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "视频设备",
        type: "line",
        data: [10, 10, 30, 12, 15, 3, 7],
        symbolSize: 1,
        symbol: "circle",
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 2,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: "#9effff",
            },
            {
              offset: 1,
              color: "#9E87FF",
            },
          ]),
          shadowColor: "rgba(158,135,255, 0.3)",
          shadowBlur: 10,
          shadowOffsetY: 20,
        },
        itemStyle: {
          normal: {
            color: colorList[0],
            borderColor: colorList[0],
          },
        },
      },
      {
        name: "门禁设备",
        type: "line",
        data: [5, 12, 11, 14, 25, 16, 10],
        symbolSize: 1,
        symbol: "circle",
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 2,
          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
            {
              offset: 0,
              color: "#73DD39",
            },
            {
              offset: 1,
              color: "#73DDFF",
            },
          ]),
          shadowColor: "rgba(115,221,255, 0.3)",
          shadowBlur: 10,
          shadowOffsetY: 20,
        },
        itemStyle: {
          normal: {
            color: colorList[1],
            borderColor: colorList[1],
          },
        },
      },
      {
        name: "可视对讲设备",
        type: "line",
        data: [150, 120, 170, 140, 500, 160, 110],
        symbolSize: 1,
        symbol: "circle",
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 2,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#fe9a",
            },
            {
              offset: 1,
              color: "#fe9a8b",
            },
          ]),
          shadowColor: "rgba(254,154,139, 0.3)",
          shadowBlur: 10,
          shadowOffsetY: 20,
        },
        itemStyle: {
          normal: {
            color: colorList[2],
            borderColor: colorList[2],
          },
        },
      },
    ],
  };
});
</script>

<style lang="scss" scoped>
.grid-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 12px;
  column-gap: 12px;

  .item-info {
    height: 40px;
    background: #0653d0a6;
    box-sizing: border-box;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }
}

.filter-box {
  position: absolute;
  right: 12px;
  top: 12px;

  .el-select {
    width: 300px;
  }
}

.scroll-row {
  cursor: pointer;
  font-size: 14px;
  color: #e9f7ff;
  height: 40px;
  display: flex;
  align-items: center;

  &:nth-child(2n) {
    background-color: transparent;
  }

  &:nth-child(2n + 1) {
    background-color: rgba(13, 76, 144, 0.5);
  }

  &__item {
    flex: 1;
    width: 0px;
    padding: 0px 23px;
    box-sizing: border-box;
  }
}
</style>
